<template>
  <div style="width: 100%; height: 100%" v-if="showCarParkComponents">
    <div class="management" @click="parkManagement">停车场管理</div>
    <!-- 地图容器 -->
    <div ref="tdtMapDiv" class="divTdtMap" pointer-events-initial />
  </div>
  <div v-else>
    <carParkForm />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue"
import park from "../../../../assets/images/icon-park.png"
import carParkForm from "./carParkForm.vue"
const tdtMapDiv = ref<HTMLDivElement | null>(null)
const selectedTower: any = ref(null) // 用于存储当前选择的塔点
const infoPosition = reactive({ left: 0, top: 0 }) // 存储信息窗口的位置

// 使用 ref 变量控制组件显示/隐藏
const showCarParkComponents = ref(true)

const towerCoords = [
  {
    name: "XXXX停车场1",
    totality: 100, // 假设总数
    surplus: 80, // 假设剩余数
    position: [103.85719, 30.02392],
    iconURL: park,
    iconAnchor: new T.Point(70, 45),
    offset: new T.Point(16, -28)
  },
  {
    name: "XXXX停车场2",
    totality: 50,
    surplus: 30,
    position: [103.8487, 30.18845],
    iconURL: park,
    iconAnchor: new T.Point(70, 45),
    offset: new T.Point(16, -28)
  }
]

// 初始化天地图的方法
const initTdtMap = () => {
  const T = window.T
  const map = new T.Map(tdtMapDiv.value)
  const centerPoint = new T.LngLat(103.84998, 30.06991)
  map.centerAndZoom(centerPoint, 12)

  // 添加天地图图层
  const layer = new T.TileLayer()
  map.addControl(layer)

  // 创建并添加自定义图标和标注点
  towerCoords.forEach((tower) => {
    const point: any = new T.LngLat(tower.position[0], tower.position[1])
    const icon = new T.Icon({
      iconUrl: tower.iconURL, // 使用对应的图标路径
      iconAnchor: tower.iconAnchor
    })
    const marker = new T.Marker(point, { icon })
    map.addOverLay(marker)

    // 创建信息窗口
    const infoWindow = new T.InfoWindow(
      `<div style="width: 200px;height: 86px;">
        <div style="font-weight: bold;font-size: 18px;color: #000000;">${tower.name}</div>
        <div style="font-weight: 600;font-size: 14px;color: #000000;margin-top: 10px;">
          <span style="font-size: 14px;color: rgba(0,0,0,0.4);">总车位：</span> ${tower.totality}
        </div>
        <div style="font-weight: 600;font-size: 14px;color: #000000;margin-top: 10px;">
          <span style="font-size: 14px;color: rgba(0,0,0,0.4);">剩余车位：</span> ${tower.surplus}
        </div>
      </div>`,
      { offset: new T.Point(-47, -40) } // 控制信息窗口位置
    )

    // 监听标注点的点击事件，显示信息窗口
    marker.addEventListener("click", () => {
      selectedTower.value = tower

      // 关闭之前的任何打开的信息窗口
      map.closeInfoWindow()

      // 打开当前标记点的infoWindow
      map.openInfoWindow(infoWindow, point)

      // 获取标注点的像素坐标
      const pixelPosition = map.lngLatToContainerPoint(point)

      // 设置信息窗口的显示位置，调整left和top来控制窗口相对于标注点的位置
      infoPosition.left = pixelPosition.x - 10 // 根据需求微调
      infoPosition.top = pixelPosition.y - 120 // 根据需求微调
    })
  })
}

const parkManagement = () => {
  showCarParkComponents.value = !showCarParkComponents.value
}

onMounted(() => {
  initTdtMap()
})
</script>

<style scoped lang="scss">
.divTdtMap {
  width: 100%;
  height: 100%;
}
.management {
  width: 108px;
  height: 36px;
  background: #00d090;
  border-radius: 4px 4px 4px 4px;
  text-align: center;
  line-height: 36px;
  font-weight: 600;
  font-size: 16px;
  color: #000000;
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 1000;
  cursor: pointer;
}
</style>
